<template>
	<div class="login-contain">
		<div class="header">
			<div class="header-logo"><img src="../../assets/index/logo.png" alt="" /></div>
		</div>
		<div class="backPassword-register">
			<div class="register-title">
				<div><i class="el-icon-arrow-left" @click="backIcon"></i></div>
				<div style="width: 100%; text-align: center;color: #FFFFFF;font-weight: bold;">找回密码</div>
				<div></div>
			</div>
			<div class="backPassword-form">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="tab-card">
					<el-form-item label="请输入原密码" prop="oldPsaaword">
						<el-input v-model="ruleForm.oldPsaaword" placeholder="请输入原密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="请输入新密码" prop="password"><el-input v-model="ruleForm.password" show-password placeholder="请输入新密码"></el-input></el-form-item>
					<el-form-item label="请确认新密码" prop="qr_password">
						<el-input v-model="ruleForm.qr_password" show-password placeholder="请确认新密码"></el-input>
					</el-form-item>
				</el-form>
				<el-button type="primary" :loading="loading" @click="affirm('ruleForm')">
					<span v-if="!loading">确认</span>
					<span v-else>重置中...</span>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { passwordForgot } from '@/api/api';
export default {
	name: 'backPassword',
	data() {
		let oldPsaaword = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请确认旧密码'));
			} else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/.test(value)) {
				callback(new Error('请输入正确的格式'));
			} else {
				callback();
			}
		};
		let password = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请确认新密码'));
			} else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/.test(value)) {
				callback(new Error('请输入正确的格式'));
			} else {
				callback();
			}
		};
		let qr_passwordRule = (rule, value, callback) => {
			if (value === null) {
				callback(new Error('请确认新密码'));
			} else if (!/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/.test(value)) {
				callback(new Error('请输入正确的格式'));
			} else if (value != this.ruleForm.password) {
				callback(new Error('两次新密码不一致'));
			} else {
				callback();
			}
		};
		return {
			loading: false,
			ruleForm: {
				oldPsaaword: null,
				password: null,
				qr_password: null,
				email: null
			},
			rules: {
				oldPsaaword: [{ required: true, validator: oldPsaaword, trigger: 'blur' }],
				password: [{ required: true, validator: password, trigger: 'blur' }],
				qr_password: [{ required: true, validator: qr_passwordRule, trigger: 'blur' }]
			}
		};
	},
	created() {
		this.ruleForm.email = this.$route.query.data;
	},
	methods: {
		backIcon() {
			this.$router.push({
				path: '/ForgetPasswords'
			});
		},
		//表单确认
		affirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true;
					passwordForgot(this.ruleForm).then(res => {
						if (res.code == 1001) {
							this.msgSuccess(res.msg);
							setTimeout(() => {
								this.loading = false;
								this.$router.push({
									path: '/login'
								});
							}, 1500);
						} else {
							this.loading = false;
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.login-contain {
	width: 100%;
	height: 100%;
	background-image: url(../../assets/logoin.png);
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 8rem;
		background: url(../../assets/index/dingbu.png) no-repeat;
		background-size: 100% 100%;
		.header-logo {
			display: flex;
			align-items: center;
			width: 65%;
			margin: 0 auto;
		}
	}
	.backPassword-register {
		width: 35rem;
		height: 33rem;
		margin: auto;
		margin-top: 7rem;
		border-radius: 0.5rem;
		background-color: #ffffff;
		.register-title {
			background-color: #146ac1;
			border-radius: 0.5rem 0.5rem 0 0;
			width: 100%;
			height: 3rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			div {
				flex: 1;
			}
			/deep/ .el-icon-arrow-left {
				margin-left: 1.2rem;
				font-size: 1.5rem;
				color: #ffffff;
			}
		}
	}
	.backPassword-form {
		width: 20.38rem;
		margin: auto;
		margin-top: 1.5rem;
		/deep/ .el-form-item__label {
			text-align: left;
			color: #000;
			float: none;
			font-weight: bold;
		}

		/deep/ .el-input .el-input__inner,
		.el-input--suffix .el-input__inner {
			height: 2.8rem;
			border: solid 0.06rem #ffffff;
			border-radius: 7px;
			background-color: #f0f0f3;
			color: #ccc;
		}
		/deep/.el-button {
			width: 20.38rem;
			height: 2.63rem;
			background-color: #146ac1;
			font-size: 1rem;
			margin-top: 1.5rem;
		}
	}
}
</style>
